<template>
  <div v-loading="loading" class="gl_contentBox gl_heightFull noPadding">
    <div class="top_title">联赛数据统计</div>
    <div class="content">
      <template v-for="(item, index) in detailsList">
        <div :key="index" class="box gl_mb_15" :style="{ backgroundImage: 'url(' + item.bgImg + ')' }">
          <p class="gl_mb_5 gl_fs_14">{{ item.name }}</p>
          <p v-if="item.code === 'moneyCount'" :style="{ color: item.color }">{{ formatMoney(tableData.moneyCount) }}</p>
          <p v-else :style="{ color: item.color }">{{ tableData[item.code] }}</p>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { api_GET_ClubBranchBranchLeagueStatisticsDataLeagueCompetitionId } from '@/extend/api/hallswaggerApi/app.js';
import { SiSTKWEventsManagementCompetitionLeagueDataDto } from '@/lib/form/game/swaggerForm';

export default {
  name: 'DataManage',
  data() {
    return {
      loading: false,
      tableData: new SiSTKWEventsManagementCompetitionLeagueDataDto(),
      gameId: '',
      detailsList: [
        {
          code: 'isolateCompetitionCount',
          name: '已有分站赛（站）',
          sum: 0,
          color: '#c10000',
          bgImg: require('@/assets/images/mall/statistics_bg_1.png')
        },
        {
          code: 'delegationCount',
          name: '联赛参赛单位（个）',
          sum: 0.00,
          color: '#cd7d00',
          bgImg: require('@/assets/images/mall/statistics_bg_2.png')
        },
        {
          code: 'athleteCount',
          name: '联赛参赛人数（位）',
          sum: 0,
          color: '#71bd00',
          bgImg: require('@/assets/images/mall/statistics_bg_3.png')
        },
        {
          code: 'athleteCategoryCount',
          name: '联赛参赛人次（次）',
          sum: 0,
          color: '#06b5b5',
          bgImg: require('@/assets/images/mall/statistics_bg_4.png')
        },
        {
          code: 'moneyCount',
          name: '缴费总额（元）',
          sum: 0,
          color: '#21009c',
          bgImg: require('@/assets/images/mall/statistics_bg_5.png')
        }
      ]
    };
  },
  created() {
    this.gameId = this.$route.params.parentId;
    this.getData();
  },
  methods: {
    // 获取数据管理首页数据
    getData() {
      var _this = this;
      _this.loading = true;
      const gameId = this.$route.query.id;
      api_GET_ClubBranchBranchLeagueStatisticsDataLeagueCompetitionId(gameId).then(res => {
        this.loading = false;
        this.tableData = res || {};
        // console.log(this.tableData);
      }, (error) => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.noPadding {
  padding: 0px;
}
.top_title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #E8E8E8;
  font-size: 16px;
  font-weight: bold;
  padding-left: 25px;
}
.content {
  padding: 15px 15px 15px 30px;
  .box {
    width: 260px;
    height: 114px;
    padding: 20px 26px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
    color: #8C8A8A;
    font-size: 30px;
    display: inline-block;
    margin-right: 50px;
    cursor: pointer;
    transition: all .4s ease 0s;
  }
  .box:last-child {
    margin-right: 0px;
  }
}
</style>
